<template>
	<div class="“show-examples”">
		<el-row>
			<el-col style="width: 60%;margin: 10px 20%"
			><el-input
					placeholder="请输入餐桌号"
					v-model="keyword"
					suffix="el-icon-search"
					clearable
			>
				<el-button
						slot="append"
						icon="el-icon-search"
						@click="getTableData"
				></el-button> </el-input
			></el-col>
			<el-col style="width: 60%;margin: 10px 20%"
			><el-input
					placeholder="订单号"
					v-model="main_id"
					suffix="el-icon-search"
					clearable
			>
				<el-button
						slot="append"
						icon="el-icon-search"
						@click="getTableData"
				></el-button> </el-input
			></el-col>
		</el-row>
		<el-table :data="mydata" border style="width:100%;height:400px;overflow: scroll">
			<el-table-column prop="seats_id" label="桌号"  align="center">
			</el-table-column>
			<el-table-column prop="total_price" label="金额"  align="center">
			</el-table-column>
			<el-table-column prop="create_time" label="时间" align="center">
			</el-table-column>
			<el-table-column prop="list" label="菜品" align="center">
				<template slot-scope="scope">
					<el-button @click="handleClick(scope.row)" type="text" size="small" style="width: 60px;
						height: 40px;background: #409EFF;color: white;font-size: 14px">查看</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-drawer
				title="菜品详情"
				:visible.sync="drawer"
				:direction="direction"
				size="65%"
		>
			<el-table
					:data="mydata1"
					border
					height="400"
					style="width: 100%; overflow: scroll">
				<el-table-column
						prop="dishes_main_id"
						label="菜名"
						width="280">
				</el-table-column>
				<el-table-column
						prop="number"
						label="数量"
						width="280">
				</el-table-column>
				<el-table-column
						prop="price"
						label="单价">
				</el-table-column>
			</el-table>

		</el-drawer>
	</div>
</template>
<script>
	import http from '../../tool/http'
	import api from '../../tool/api'
	export default {
		data() {
			return {
				keyword:'',
				mydata:[],
				main_id:'',
				drawer: false,
				direction: 'rtl',
				// selectdata:[],
				mydata1:[],
			};
		},
		created(){
			this.getalldata()
		},
		methods: {

			getTableData() {
				let obj = {seats_id: this.keyword,id: this.main_id};
				return http({
					url: 'website/diningOrderMainController/selectOrderInformationByNeed',
					method: 'post',
					data: obj
				}).then(res => {
					this.mydata = res.data.data;
					console.log(res);
				})
			},
			getalldata() {
				http({
					url: '/website/diningOrderMainController/getListData',
					method: 'post',
				}).then(res => {
					this.mydata = res.data.data;
					console.log(res)
				})
			},
			handleClick(row) {
				this.drawer=true;
				console.log(row.id);
				http({
					url: '/website/diningOrderDetailController/getOrder',
					method: 'post',
					data:{main_id:row.id}
				}).then(res => {
					this.mydata1 = res.data.data;
					console.log(res)
				})
			},
		},
		computed:{
			// selecttabel(){
			// 	return this.getTableData.filter(item=>{
			// 		if(item.seats_id==='keyword'){
			// 			return item
			// 		}
			// 	})
			// },

		}
	}
</script>
<style scoped>

</style>